<template>
   <div class="details">
    <baidu-map @ready="getCurrentCity">
      <div id="container"></div>
      <div class="punch-btn" @click="punch">
        <div class="punch-btn-text">{{ tableData.length===0?'打卡':'重新打卡' }}</div>
        <div class="punch-btn-time">{{ timeStr }}</div>
      </div>
      <div class="position-text">{{ position }}</div>
      <div v-for="(item,index) in tableData" :key="item.id" class="punch-clock">
        <div class="punch-li">
          <div class="title">打卡时间</div>
          <div class="con">{{item.clockTime}}</div>
        </div>
        <div class="punch-li">
          <div class="title">打卡位置</div>
          <div class="con">{{item.clockPosition}}
            <!-- <Icon type="clear" @click.native="del(item.id)"></Icon> -->
          </div>
        </div>
      </div>
    </baidu-map>
   </div>
  </template>
  <script>
  import Vue from "vue"
  import AMapLoader from "@amap/amap-jsapi-loader";
  import setting from "@/setting"
  import { Icon,XInput, XButton} from 'vux'
  export default {
    name: "clockIn",
    data() {
      return {
        paramInfo: null,
        formInfo:{
          serialNumber: '',
          clockPosition: '沈阳市',
          correctPosition: '',
          locationType: '银行'
        },
        timeStr: '',
        tableData: [],
        pageSize: 20,
        currentSize: 2,
        total: 0,
        lat: '',//当前位置的纬度
        lng: '',//当前位置精度
        position: '',//当前地址
      }
    },
    components: {
      Icon,XInput, XButton
    },
    mounted() {
      // this.getCurrentCity();
    },
    unmounted() {
      this.map&&this.map.destroy();
    },
    created () {
      this.paramInfo = this.$route.query
      this.formInfo.serialNumber = this.paramInfo.taskId
      this.getDate()
      this.getData()
    },
    computed: {

    },
    methods: {
      getCurrentCity({ BMap }) {
        //高德地图的定位兼容性不好，所以需要先使用百度地图获取当前位置的经纬度
        // var map = new BMap.Map("container");      
        // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        const geolocation = new BMap.Geolocation();
        geolocation.enableSDKLocation();
        geolocation.getCurrentPosition((result) => {
          console.log("baidu",result)
          if (geolocation.getStatus() === 0) {
            this.lat = result.latitude
            this.lng = result.longitude
            this.initAMap()
          } else {
            this.currentCity = '定位失败'
          }
        });
      },
      initAMap() {
        //百度地图的定位与逆地址编码都只能精准到市区，所以此处需要使用高德地图进行更详细的逆编码来获取地理位置信息
        AMapLoader.load({
          key: "8583b1b7b7e5c677ebec0b07bdd3f03d", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
          .then((AMap) => {
            this.map = new AMap.Map("container", {
              // 设置地图容器id
              viewMode: "2D", // 是否为3D地图模式
              zoom: 11, // 初始化地图级别
              center: [116.397428, 39.90923], // 初始化地图中心点位置
            });
            AMap.plugin('AMap.Geocoder', ()=> {
              var geocoder = new AMap.Geocoder({
                city: '010' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
              })
              let datas = this.bd_decrypt(this.lng, this.lat)
              var lnglat = [datas.lng, datas.lat]
              geocoder.getAddress(lnglat, (status, result)=> {
                console.log('地理位置:', status, result, result.regeocode.formattedAddress)
                if (status === 'complete' && result.info === 'OK') {
                    this.position = result.regeocode.formattedAddress
                }
              })
            })
          })
          .catch((e) => {
            console.log(e);
          });
      },
      getDate () {
          var str = ''
          var date = new Date();
          var year = date.getFullYear()
          var month = date.getMonth() + 1
          if (month<10) {
            month = '0' + month
          }
          var dates = date.getDate()
          if (dates<10) {
            dates = '0' + dates
          }
          var hour = date.getHours()
          if (hour<10) {
            hour = '0' + hour
          }
          var minutes = date.getMinutes()
          if (minutes<10) {
            minutes = '0' + minutes
          }
          var seconds = date.getSeconds()
          if (seconds<10) {
            seconds = '0' + seconds
          }
          var day = date.getDay()
          var arr = [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
          // str = `${year}-${month}-${dates} ${hour}:${minutes}:${seconds}  ${arr[day]}`
          str = `${year}-${month}-${dates} ${hour}:${minutes}:${seconds}`
          this.timeStr = str
          setTimeout(()=>{
            this.getDate()
          },1000)
      },
      getPlace () {
            console.log('获取地址')
      },
      del (id) {
        this.baseService.postForm(`${this.__ctx}/plugin/address/deleteAddress`,{id:id})
        .then(res => {
            if (res.isOk) {
              Vue.tools.toast('删除成功',"success")
              this.getData()
            } else {
            Vue.tools.toast(res.msg,"info")
            }
        }).catch(err=>{
            Vue.tools.toast(err.message,"warning")
        })
      },
      punch () {
        let item = {
          "clockTime":this.timeStr,
          "clockPosition":this.position,
          "id":this.tableData.length+1,
        }
        this.tableData.push(item)
        //  let param = {
        //  "serialNumber":this.formInfo.serialNumber,
        //  "clockPosition":this.formInfo.clockPosition,
        //  "correctPosition":this.formInfo.correctPosition,
        //  "locationType": this.formInfo.locationType
        //  }
        //  this.baseService.post(this.__ctx + '/plugin/address/addAddress',param)
        //  .then(res => {
        //     if (res.isOk) {
        //       Vue.tools.toast('打卡成功',"success")
        // 	   this.getData()
        //  	  }
        //  })
      },
      getData () {
        let param = {
        "serialNumber":this.formInfo.serialNumber,
        "offset": 0,
        "limit": 1000
        }
        this.baseService.postForm(this.__ctx + '/plugin/address/query',param)
        .then(res => {
            if (res.isOk) {
                this.tableData = res.rows
            }
        })
      },
      bd_decrypt(bdLng, bdLat) {
        const X_PI = Math.PI * 3000.0 / 180.0;
        const x = bdLng - 0.0065;
        const Y = bdLat - 0.006;
        const Z = Math.sqrt(x * x + Y * Y) - 0.00002 * Math.sin(Y * X_PI);
        const Theta = Math.atan2(Y, x) - 0.000003 * Math.cos(x * X_PI);
        const lng = Z * Math.cos(Theta);
        const lat = Z * Math.sin(Theta);
        return {lng, lat};
      },
      getLongitudeLatitude() {
        //如果该对象存在，那么地理位置服务可用。
        // if ('geolocation' in navigator) {
        //   /* 地理位置服务可用 */
        //   var options = {
        //     enableHighAccuracy: true, //布尔值，表示系统是否使用最高精度来表示结果，注意，这会导致较慢的响应时间或者增加电量消耗（比如对于支持gps的移动设备来说）。如果值为false ，设备会通过更快响应以及/或者使用更少的电量等方法来尽可能的节约资源。默认值fasle
        //     timeout: 5000, //它表明的是设备必须在多长时间（单位毫秒）内返回一个位置。默认直到获取到位置才会返回值。
        //     maximumAge: 0 //表明可以返回多长时间（即最长年龄，单位毫秒）内的可获取的缓存位置。如果设置为 0, 说明设备不能使用一个缓存位置，而且必须去获取一个真实的当前位置。默认0
        //   }
        //   console.log('获取经纬度',navigator.geolocation)
        //   navigator.geolocation.getCurrentPosition(
        //     (position)=> {
        //       console.log('经纬度:',position)
        //       //position.coords (只读) 返回一个定义了当前位置的Coordinates对象。
        //       //position.timestamp (只读) 返回一个时间戳DOMTimeStamp， 这个时间戳表示获取到的位置的时间。
        //       // this.lat = position.coords.latitude //当前位置的纬度
        //       // this.lng = position.coords.longitude //当前位置精度
        //       AMap.plugin('AMap.Geocoder', ()=> {
        //         var geocoder = new AMap.Geocoder({
        //           city: '010' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
        //         })
        //         geolocation.getCurrentPosition((status,result)=>{
        //           console.log('经纬度位置:',status, result)
        //         });
        //         var lnglat = [116.396574, 39.992706]
        //         geocoder.getAddress(lnglat, (status, result)=> {
        //           console.log('地理位置:',status, result)
        //           if (status === 'complete' && result.info === 'OK') {
        //               // result为对应的地理位置详细信息
        //           }
        //         })
        //       })
        //     }, 
        //     (err)=> {
        //       var errorType = ['您拒绝共享位置信息', '获取不到位置信息11', '获取位置信息超时']
        //       console.log(errorType[err.code - 1])
        //     }, 
        //     options
        //   )
        // } else {
        //   /* 地理位置服务不可用 */
        //   console.log('无法获取您的位置，请检查定位是否开启或刷新重试')
        // }
      }
    }
  }
  </script>
  <style lang="less" scoped>
	 .details{
     padding: 10px 0; 
     background-color: #fff;
      .position-text{
        width: 70%;
        margin: 0 auto;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 20px;
      }
      .punch-btn{
        width: 147px;
        height: 147px;
        border-radius: 50%;
        background: linear-gradient(360deg, #FF454A 0%, #FFB689 100%);
        box-shadow: 0px 4px 16px 0px rgba(255,82,62,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 10px auto;
        .punch-btn-text{
          font-size: 20px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
        }
        .punch-btn-time{
          margin-top: 5px;
          font-size: 12px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 300;
          color: #FFFFFF;
        }
      }
      .punch-clock{
        padding: 10px 0;
        margin: 0 1em;
        border-bottom: 1px solid #E5E6EB;
        &:last-child{
          border: 0;
        }
        .punch-li{
          display: flex;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          .title{
            color: #86909C;
            margin-right: 10px;
          }
          .con{
            color: #1D2129;
            flex: 1;
          }
        }
      }





	   .item{
	     padding: 10px;
	     border-bottom: 1px solid #ddd;
	     align-items: center;
	     display: flex;
       position: relative;
	     &:last-child{
	       border-bottom:none
	     }
	     >div{
	       display: inline-block;
	       vertical-align: middle;
	     }
	     .name{
	       width: 100px;
	     }
       .cotent{
         width: calc(~'100% - 120px');
         word-break: break-all;
       }
	   }
     /deep/ .weui_icon_download{
             position: absolute;
             right: 0;
             bottom: 0;
             font-size: 24px;
             color: #09BB07;
           }
     .footer{
        padding: 10px;
        table{
          width: 100%;
          table-layout: fixed;
          th,td{
            padding: 5px;
            word-break: break-all;
            text-align: center;
            .weui_icon_clear {
              font-size: 20px;
            }
          }
          th{
            background-color: #ddd;
          }
        }
     }
	 }
  </style>
